// INDEX PAGE STYLES
// ----------------------------------------------------------------------------

#eggTimerPage

    // Egg image wrapper.
    #eggWrapper
        height 230px

        // The egg images.
        #eggImage, #eggImageIn
            cursor pointer
            left 50%
            position absolute

        #eggImage.finished
            margin-left auto !important

        // The "inside egg" image will be shown once the countdown starts.
        #eggImageIn
            display none
            opacity 0

        // Medium egg.
        img.medium
            height 195px
            margin-left -71px
            margin-top 30px

        // Large egg.
        img.large
            height 210px
            margin-left -77px
            margin-top 15px

        // Extra large egg.
        img.xlarge
            height 225px
            margin-left -82px

    // Yolk common styles.
    .yolk
        cursor pointer
        display inline-block
        margin 10px
        padding 3px
        opacity 0.4
        width 50px

    // Selected yolk type.
    .yolk.active
        cursor default
        opacity 1

    // Squidgy egg image on the left.
    #eggSquidgy
        background rgb(250, 160, 60)

    // Firm egg image on the right.
    #eggFirm
        background rgb(250, 220, 80)

    // The final egg description above the "start" button.
    #eggDescription
        margin 10px

    // Tip: tap to change egg size.
    #eggSizeTip
        background url(../images/tipBox.png) no-repeat
        font-size 0.8em
        height 140px
        padding 40px 20px 20px 20px
        position absolute
        right 22px
        top 90px
        width 162px